<template>
  <div class="login-container">
    <div class="login-bg">
      <div class="blue-circle"></div>
      <div class="blue-wave"></div>
    </div>
    <div class="login-mask"></div>
    <div class="login-box">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span class="card-title">🌿 东软环保管理端登录</span>
          </div>
          <div class="avatar">
            <img src="@/assets/img.png">
          </div>
        </template>
        <el-form :model="adminsForm" label-width="80px" class="login-form">
          <el-form-item label="登录账号">
            <el-input v-model="adminsForm.adminCode" placeholder="username" clearable />

          </el-form-item>
          <el-form-item label="登录密码">
            <el-input v-model="adminsForm.password" type="password" show-password placeholder="password" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { inject, reactive } from "vue";
import { useRouter } from 'vue-router';

const myElMessage = inject('myElMessage');
const axios = inject('axios');
const router = useRouter();

const adminsForm = reactive({
  adminCode: "",
  password: "",
});

const login = () => {
  if (adminsForm.adminCode.trim() === '') {
    myElMessage('登录编码不能为空！', 'warning');
    return;
  }
  if (adminsForm.password.trim() === '') {
    myElMessage('登录密码不能为空！', 'warning');
    return;
  }

  axios.post("admins/getAdminsByCodeByPass", adminsForm)
      .then((response) => {
        if (response.data !== '') {
          sessionStorage.setItem('admins', JSON.stringify(response.data));
          router.push('/index');
        } else {
          myElMessage('登录编码或密码不正确', 'error');
        }
      })
      .catch((error) => {
        console.log(error);
      });
};
</script>

<style scoped>
.login-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: "微软雅黑", sans-serif;
}

/* 背景图 */
.login-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('@/assets/nepm-login.svg') bottom center no-repeat;
  background-size: 100% auto;
  z-index: 1;
}


/* 背景优化 */


.blue-circle {
  position: absolute;
  top: -150px;
  right: -150px;
  width: 400px;
  height: 400px;
  background-color: #0099ff;
  border-radius: 100%;
  opacity: 0.90;
}



/* 登录盒子居中 */
.login-box {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* 卡片样式 */
.box-card {
  width: 370px;
  padding: 36px 28px 18px 28px;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  text-align: center;
  background: rgba(255,255,255,0.98);
  border: none;
  transition: box-shadow 0.3s;
}
.box-card:hover {
  box-shadow: 0 8px 32px rgba(0,153,255,0.15);
}

.avatar {
  margin-bottom: 16px;
}
.avatar img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid #eee;
  object-fit: cover;
}
/* 卡片头部标题 */
.card-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

/* 表单样式 */
.login-form {
  padding-top: 10px;
}
</style>
